<template>
  <ul class="module-small">
    <span class="module-small-title" @click="goModule()">{{ moduleName }}</span>
    <el-row class="module-small-content-out">
      <el-col :span="10">
        <div class="grid-content">
          <img :src="picSrc" class="medical-img" @click="goModule()"/>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content">
          <div class="child" v-for="(item,i) in List.slice(0,4)" :key="i">
            <span class="iconfont icon-point">&#xe757;</span>
            <p class="module-small-content-title" @click="goArticle(item.artId)">
              【{{item.catalogueName}}】{{item.title}}
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
    <li class="child" v-for="(item,i) in List.slice(4,7)" :key="i">
      <span class="iconfont icon-point">&#xe757;</span>
      <p class="module-small-content" @click="goArticle(item.artId)">【{{item.catalogueName}}】{{item.title}}</p>
    </li>
  </ul>
</template>

<script>
export default {
  name:'medicalModule',
  props: ["moduleName",'catalogue','picSrc', "routeName",'List',],
  data() {
    return {
      list:[],
    }
  },
  methods:{
    goArticle(artId){
      let link = this.$router.resolve({
        path: "/article",
        query: { artId: artId },
      });
      window.open(link.href, "_blank");
    },
    goModule(){
      let link = this.$router.resolve({
        path:this.routeName
      });
      window.open(link.href, "_blank");
    }
  },
  // async mounted(){
  //   // let listRes=await this.$api.reqGeneralAllByCatalogue(this.catalogue)
  //   // if(listRes.code===200){
  //   //   this.list=listRes.rows
  //   // }
  //   console.log('list',this.List);
  // },
};
</script>

<style lang="less" scoped>
.module-small {
  margin-bottom: 20px;
  text-align: left;
  list-style: none;
  border: 0.1px solid #d7d7d7;
  padding: 5px;
  .medical-img {
    width: 160px;
    height: 90px;
    margin-left: 10px;
  }
  .module-small-title {
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    margin-left: 5px;
    padding-left: 5px;
    border-left: 3px solid @themeColor;
    &:hover {
      color: @themeColor;
    }
  }
  .module-small-content-out {
    margin-top: 10px;
  }
  .child {
    margin-bottom: 5px;
    text-align: left;
    .module-small-content-title {
      display: inline-block;
      vertical-align: bottom;
      font-size: 15px;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
    }
    .icon-point {
      float: left;
      color: #e1e1e1;
    }
    .module-small-content {
      display: inline-block;
      vertical-align: bottom;
      font-size: 15px;
      width: 380px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
    }
    .icon-hot {
      margin-left: 10px;
      color: #ed4c52;
    }
    .hot-number {
      font-size: 14px;
    }
  }
}
</style>